<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <img id="myImage">
</body>

<script>
  var img = document.getElementById("myImage");

  function detectShapesOnImageUrl(detector, url) {
    var detector = eval('new ' + detector + '()');
    console.log(detector);
    const completePromise = new Promise(resolve => {
        img.onload = function() {
          console.log('image loaded');
          resolve();
        };
      })
      .then(() => detector.detect(img))
      .then(detectedObjects => {
        var results = "";
        console.log('something detected');
        for (var i = 0; i < detectedObjects.length; i++) {
          var boundingBox = detectedObjects[i].boundingBox;
          var result = boundingBox.x + "," + boundingBox.y + "," +
                      boundingBox.width + "," + boundingBox.height;
          results += result + "#";
        }
        return results;
      })
      .catch(error => {
        console.error(error.message);
        throw error;
      });

    img.src = url;

    return completePromise;
  }
  </script>
</html>
